 <template>
  <div class="wrap">
    <div class="sel">
      <span class="txt">关键词</span>
      <input v-model="params.keyWord"
        type="text"
        placeholder="操作人账号">
        <span class="txt">时间</span>
        <el-date-picker
          v-model="params.startTime"
          type="date"
          placeholder="选择开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-date-picker
          v-model="params.endTime"
          type="date"
          placeholder="选择结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      <div class="btn"
        @click="querys()" style="cursor: pointer;">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="titles">
      操作列表
    </div>
        <el-table :data="logList" stripe style="width: 100%">
            <el-table-column align="center" prop="loginTime"  label="登录时间">
        </el-table-column>
<el-table-column align="center" prop="account" label="用户账号"></el-table-column>
        <el-table-column align="center" prop="content" width="500" label="内容"></el-table-column>
        <el-table-column align="center" prop="operationTime" label="操作时间"></el-table-column>
    </el-table>
    <div style="text-align: center;padding: 50px 0;">
      <el-pagination background
        layout="prev, pager, next"
        :current-page="search.page"
        @current-change="changePage"
        :page-count="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      params:{
          keyWord:'',
          startTime:'',
          endTime:'',
          page:1,
          limit:10,
      },
      search: {
        page: 1,
        limit: 10
      },
      total:0,
      logList:[]
    };
  },
  mounted: function() {
      this.getLogList()
  },
  methods: {
    querys() {
      this.params.page = 1;
      this.search = JSON.parse ( JSON.stringify ( this.params ));
      this.getLogList();
    },
      /**
       * 查询日志
       */
      getLogList: function () {
          axios({
          method: "post",
          url: `${this.$store.state.url}/log/selectLogList`,
          // data: qs.stringify(this.params)
          data: qs.stringify ( this.search )
        }).then( res => {
            this.total = Math.ceil(res.data.count/10)
            if(res.data.code == 0) {
                this.logList = res.data.data
            } else {
                this.$alert(res.data.msg)
            }
        })
      },
     /**
      * 分页
      */
    changePage(argv) {
      // this.params.page = argv;
      this.search.page = argv;
      this.getLogList();
    },
      /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  }
};
</script>
<style scoped>
.wrap {
  width: 90%;
  margin: 40px auto;
}
.titles {
  height: 62px;
  line-height: 62px;
  color: #778ca2ff;
  font-size: 14px;
  width: 100%;
  display: inline-block;
}
.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
  width: 42px;
}
.sel input {
  float: left;
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin-right: 20px;
}
.btn {
  display: inline-block;
  color: #fff;
  width: 80px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  text-align: center;
  margin-left: 37px;
}

.addpar {
  float: right;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  width: 114px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  text-align: center;
  line-height: 32px;
}
</style>
